<template>
  <div class="articles">
    <!-- 表格组件，传入表头和数据 -->
    <FormComponent :label-arr="labArr" :table-data="articlesArr">
      <el-table-column label="操作" width="270">
        <template v-slot="scope">
          <!-- 删除按钮 -->
          <button
              style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none"
              @click="deleteAnnouncement(scope.$index)">删除
          </button>

          <!-- 编辑按钮 -->
          <button
              style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left:20px;float: none"
              @click="editAnnouncement(scope.$index)">编辑
          </button>
        </template>
      </el-table-column>
    </FormComponent>

    <!-- 分页控制 -->
    <el-pagination
        v-model:current-page="currentPage"
        :page-size="5"
        :total="total"
        @update:current-page="handlePageChange">
    </el-pagination>

    <!-- 编辑通知的对话框 -->
    <el-dialog
        v-model="dialogVisible"
        title="编辑通知"
        :visible="dialogVisible"
        @close="dialogVisible = false"
        width="50%">
      <el-form :model="editingAnnouncement">
        <el-form-item label="通知 ID">
          <el-input v-model="editingAnnouncement.announcementId" disabled/>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="editingAnnouncement.title" disabled/>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="editingAnnouncement.content" placeholder="请输入内容"/>
        </el-form-item>
        <el-form-item label="咨询师 ID">
          <el-input v-model="editingAnnouncement.consultantId" disabled/>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-input v-model="editingAnnouncement.publishTime" disabled/>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAnnouncementEdit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import FormComponent from "@/components/form/modle/FormComponent.vue";

// 定义表格头部字段
let labArr = ref([
  { announcementId: "通知 ID" },
  { title: "标题" },
  { content: "内容" },
  { consultantId: "咨询师 ID" },
  { publishTime: "发布时间" }
]);

// 存储通知数据
let articlesArr = ref([]);
// 总页数
let total = ref(0);

// 存储当前编辑的通知
let editingAnnouncement = ref({
  announcementId: '',
  title: '',
  content: '',
  consultantId: '',
  publishTime: ''
});

// 对话框显示状态
let dialogVisible = ref(false);

// 从 localStorage 获取咨询师信息
const value = JSON.parse(localStorage.getItem('key'));
const consultantId = value?.data?.consultantId;  // 获取 consultantId

// 获取咨询师的通知数据
const getAnnouncements = (pageNum = 1, pageSize = 5) => {
  axios.get(`http://127.0.0.1:9090/announcements/selectByConsultantId/${consultantId}`, {
    params: { pageNum, pageSize }
  })
      .then(response => {
        const data = response.data;
        console.log('获取的数据', data);  // 打印获取的数据，检查回复字段是否更新
        if (data && data.data && data.data.list) {
          articlesArr.value = data.data.list.map(item => ({
            announcementId: item.announcementId,
            title: item.title,
            content: item.content,
            consultantId: item.consultants?.consultantId,
            publishTime: item.publishTime
          }));
        }
        if (data && data.data) {
          total.value = data.data.total;
        }
      })
      .catch(error => {
        console.error("获取通知失败", error);
      });
};

onMounted(() => {
  if (consultantId) {
    getAnnouncements();  // 默认获取第一页数据
  }
});

const currentPage = ref(1);

// 处理分页变化
const handlePageChange = (pageNum) => {
  currentPage.value = pageNum;
  getAnnouncements(pageNum, 5);
};

// 删除通知
const deleteAnnouncement = (index) => {
  const announcementId = articlesArr.value[index].announcementId;
  axios.delete(`http://127.0.0.1:9090/announcements/${announcementId}`)
      .then(() => {
        getAnnouncements(currentPage.value, 5);  // 删除后重新获取数据
      })
      .catch(error => {
        console.error("删除失败", error);
      });
};

// 编辑通知
const editAnnouncement = (index) => {
  const announcement = articlesArr.value[index];
  // 将通知内容复制到编辑表单，并设置当前时间为回复时间
  editingAnnouncement.value = {
    ...announcement
  };
  console.log("编辑通知：", editingAnnouncement.value);  // 检查编辑数据
  dialogVisible.value = true;  // 弹出对话框
};

// 提交修改
const submitAnnouncementEdit = () => {
  if (editingAnnouncement.value) {
    console.log("提交的数据", editingAnnouncement.value); // 检查提交的数据
    axios.put(`http://127.0.0.1:9090/announcements`, editingAnnouncement.value, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
        .then(() => {
          // 提交成功后刷新数据，确保获取到最新的通知内容
          getAnnouncements(currentPage.value, 5);  // 修改后重新获取数据
          dialogVisible.value = false;  // 关闭对话框
        })
        .catch(error => {
          console.error("修改失败", error.response.data); // 查看错误的详细信息
        });
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>